
<template>
  <el-dialog
    title="组织机构选择"
    :visible.sync="show"
    width="600px"
    append-to-body
    center
  >
    <div class="content">
      <tree-box
        v-model="selectedNode"
        :data="treeData"
        title="组织机构"
        placeholder=""
      />
      <!-- :render-content="renderContent" -->
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="show = false">取 消</el-button>
      <el-button type="primary" @click="saveDoc">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getOrganizationTree } from '@/api/manage'
import TreeBox from '@/components/TreeBox'
export default {
  name: 'UnitTree',
  components: {
    TreeBox
  },
  props: {
    showModal: {
      type: Boolean,
      default: false
    },
    optType: {
      type: String,
      default: 'add'
    },
    data: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      selectedNode: null,
      treeData: []
    }
  },
  computed: {
    show: {
      get() {
        return this.showModal
      },
      set(val) {
        this.$emit('update:showModal', val)
      }
    }
  },
  watch: {
    showModal: {
      handler(newData, oldData) {
        // if (newData.id) {
        //   this.getDocDetail(newData.id)
        //   Object.keys(this.form).forEach(key => {
        //     this.form[key] = newData[key]
        //   })
        // }
        if (newData) {
          this.getMenus()
        }
      },
      immediate: true
    }
  },
  mounted() {

  },
  methods: {
    getMenus() {
      getOrganizationTree().then(res => {
        const { nodes } = res.data || {}
        this.treeData = nodes || []
      })
    },
    saveDoc() {
      this.$emit('getUnit', this.selectedNode)
      this.show = false
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  height: 500px;
}
</style>
